<template>
  <el-card class="card-body">
    <el-button type="primary" style="margin-bottom: 12px" @click="handleAdd"
    >添加
    </el-button>
    <el-row>
      <el-table :data="tableData" class="table-body" :header-cell-style="{background:'#F4F6F9',color:'#1D2129'}">
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column prop="name" label="标题" width="220">
        </el-table-column>
        <el-table-column prop="content" show-overflow-tooltip label="描述"></el-table-column>
        <el-table-column prop="outHref" show-overflow-tooltip label="外链地址">
          <template slot-scope="scope">
            <el-link type="primary" @click="handleCheck(scope.row.outHref)">{{
                scope.row.outHref
              }}</el-link>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="80">
          <template slot-scope="scope">
            {{
              scope.row.status === 1
                  ? "草稿"
                  : scope.row.status === 2
                      ? "待审核"
                      : scope.row.status === 3
                          ? "已上架"
                          : scope.row.status === 4
                              ? "驳回"
                              : scope.row.status === 5
                                  ? "下架"
                                  : scope.row.status === 6
                                      ? "回收站"
                                      : "-"
            }}
          </template>
        </el-table-column>
        <el-table-column prop="updateDate" label="时间" width="160"></el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="handleDetail(scope.row.id)">编辑</el-button>
            <el-button type="text" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <Pagination :count="Number(count)" :current="1" @handleSizeChange="handleSizeChange"
                  @handleCurrentChange="handleCurrentChange"/>
    </el-row>
    <Add ref="add" @getParentTableData="getTableData" />
    <Detail ref="detail" @getParentTableData="getTableData" />
  </el-card>
</template>

<script>
// import SearchForm from './components/SearchForm';
// import DataTables from './components/DataTables';
import Add from './Add.vue';
import Detail from './Detail.vue';
import { operationArticleApi } from "@/api/modules/article.api";
import Pagination from "@/components/Pagination.vue";
import { deleteMsgApi, getMsgListApi } from "@/api/modules/bulletin.api";
import { mapMutations } from "vuex";

export default {
  components: {
    Pagination,
    Add,
    Detail
  },
  data() {
    return {
      tableData: [],
      count: 0,
      page: {
        pageNum: 1,
        pageSize: 10
      }
    };
  },
  mounted() {
    this.getTableData(this.page);
    this.setBreadcrumb([
      {
        name: "文章管理",
        path: "/writings",
      },
      {
        name: "消息弹窗",
        path: "/writings/bulletin",
      },
    ]);
  },
  methods: {
    ...mapMutations("base", ["setBreadcrumb"]),
    async getTableData({pageNum = 1, pageSize = 10, ...data}) {
      const res = await getMsgListApi({pageNum, pageSize, ...data})
      this.tableData = res.records
      this.count = res.total
    },
    async handlePass(id) {
      await operationArticleApi({articleId: id,status: 3})
      await this.getTableData(this.page)
    },
    async handleReject(id){
      await operationArticleApi({articleId: id,status: 4})
      await this.getTableData(this.page)
    },
    async handleCheck(outHref) {
      if(outHref){
        window.open(outHref)
      }
    },
    handleSizeChange(pageSize) {
      this.page.pageNum = pageSize;
      this.$emit("getTableData", this.page);
    },
    handleCurrentChange(pageNum) {
      this.page.pageNum = pageNum;
      this.$emit("getTableData", this.page);
    },
    handleAdd() {
      this.$refs.add.init();
    },
    handleDetail(id){
      this.$refs.detail.init(id);
    },
    async handleDelete(id){
      await deleteMsgApi({id})
      this.$message({
        message: "成功",
        type: "success",
      });
      await this.getTableData(this.page)
    }
  },
}
</script>
